<template>
  <el-dialog
    :title="alarmTitle"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    width="30%"
    @close="$emit('close')"
  >
    <div>
      <span>{{ alarmInfo }}</span>
      <div class="mt-20">
        <el-form
          ref="descForm"
          label-width="auto"
          :model="form"
          :rules="descRules"
        >
          <el-form-item :label="$t('INSTRUCTIONS')" prop="desc">
            <el-input
              v-model="form.desc"
              type="textarea"
              :placeholder="placeholder"
              :row="4"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">{{ $t('CANCEL') }}</el-button>
      <el-button type="primary" @click="comfirmAlarmSubmit">{{
        $t('CONFIRM')
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import AlarmRecordApi from '@/api/basebiz/AlarmRecordApi'
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        currAlarm: {},
        alarmStatus: '',
        dialogVisible: false,
        form: {
          desc: ''
        },
        descRules: {
          desc: [
            {
              required: true,
              message: this.$t('ENTER_THE_ALARM_CAUSE'),
              trigger: 'blur'
            } // '请填写确认告警原因'
          ]
        },
        alarmTitle: this.$t('ALARM_CONFIRM'), // '告警确认',
        alarmInfo: this.$t('YES_NO_CONFIRM_ALARM'), // '是否确认所选当前告警？',
        placeholder: this.$t('ENTER_THE_ALARM_CAUSE') // '请填写确认告警原因'
      }
    },
    computed: {
      ...mapGetters(['dictList', 'getUser'])
    },
    watch: {
      visible(newVal) {
        this.dialogVisible = newVal
      }
    },
    methods: {
      comfirmAlarm(row, type) {
        this.currAlarm = row
        if (type === 'CONFIRM') {
          this.alarmTitle = this.$t('ALARM_CONFIRM') // '告警确认',
          this.alarmInfo = this.$t('YES_NO_CONFIRM_ALARM') // '是否确认所选当前告警？'
          this.placeholder = this.$t('ENTER_THE_ALARM_CAUSE') // '请填写确认告警原因'
          this.alarmStatus = 'CONFIRM'
        } else {
          this.alarmTitle = this.$t('ALARM_CANCEL') // '告警取消'
          this.alarmInfo = this.$t('YOU_WANT_TO_CANCEL_ALARM') // '是否取消所选站点的当前告警？'
          this.placeholder = this.$t('ENTER_CANCELING_THE_ALARM') // '请填写取消告警原因'
          this.alarmStatus = 'CANCEL'
        }
      },
      comfirmAlarmSubmit() {
        // 确认告警 取消
        this.$refs['descForm'].validate(async(valid) => {
          if (valid) {
            const data = {
              alarmId: this.currAlarm.alarmId,
              deviceId: this.currAlarm.deviceId,
              startTime: this.currAlarm.startTime,
              alarmTypeText: this.currAlarm.alarmTypeText,
              confirmDesc: this.currAlarm.confirmDesc
            }
            // 确认告警
            this.alarmStatus === 'CONFIRM'
              ? data.confirmDesc = this.form.desc
              : data.cancelDesc = this.form.desc

            this.alarmStatus === 'CONFIRM'
              ? data.confirmer = this.getUser.userId
              : data.canceler = this.getUser.userId
            const res = this.alarmStatus === 'CONFIRM'
              ? await AlarmRecordApi.confirm(data)
              : await AlarmRecordApi.cancel(data)
            this.$emit('close')
            if (res) {
              this.form.desc = ''
              this.$message.success(this.$t('EXECUTE_RESULT_SUCCESS'))
              this.$store.commit('ALARM_REMOVE', this.currAlarm)
              this.$store.commit('REMOVE_NOTIFY_LIST', this.currAlarm)
              this.$emit('loadData')
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }

  }

</script>
<style lang='scss' scoped>

</style>
